<template>
  <div>
    <div id="Content">

      <div id="BackLink">
        <a @click="backProduct(productId)">
          <span>'Return to'+ {{productId}}</span>
        </a>
      </div>

      <div id="Catalog">

        <table>
          <tr>
            <td >
              <div >
                <img :src="'../../assets/images/+{{productList.productImage}}'">
              </div>
              <div >
                <span>{{productList.productCharacter}}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td><b > {{itemId}} </b></td>
          </tr>
          <tr>
            <td><b><font size="4">
              <span v-if=" itemList[1]  != null" >{{itemList[1]}}</span>
              <span v-if=" itemList[2] != null" >{{itemList[2]}}</span>
              <span v-if=" itemList[3] != null" >{{itemList[3]}}</span>
              <span v-if=" itemList[4] != null" >{{itemList[4]}}</span>
              <span v-if=" itemList[5] != null" >{{itemList[5]}}</span>
              <span >{{productId}}</span>
            </font></b></td>
          </tr>
          <tr>
            <td >{{ productId }}</td>
          </tr>
          <tr>
            <td>
              <span v-if="itemList.itemStock <= 0" >Back ordered</span>
              <span v-if="itemList.itemStock > 0" >{{itemList.itemStock}} in stock.</span>
            </td>
          </tr>
          <tr>
            <td >{{itemList.itemPrice}}
            </td>
          </tr>
          <tr>
            <td>
              <a @click="addToCart()">add to card</a>
            </td>
          </tr>
        </table>

      </div>

    </div>
  </div>
</template>


// ！！！！！！！  product 界面请给我传 itemId 和productId   ！！！！！！！！
<script>
import top from "../../components/common/top.vue";
import bottom from "../../components/common/bottom.vue";
import axios from 'axios';
import product from "@/components/catalog/product.vue";
export default {
  components: {
    top,
    bottom,
  },
  name: 'item',
  data() {
    return {
      itemId : '',
      productId: [],
      productList: [],
      itemList: []
    }
  },
  methods: {
    fetchItemList() {
      axios.get(`http://localhost:8080/jpetstore/pets/${this.productId}`)
          .then(response => {
            console.log(response.data.data);
            this.productList = response.data.data;
            this.itemList = this.productList.petItemList;
          })
          .catch(error => {
            console.error('Error fetching product list:', error);
          });
    },

    backProduct(productId){
      return this.$router.push({ path: '/product', query: { productId: productId } });
    },

    addToCart(){
      return this.$router.push({ path: '/cart', query: { itemId: itemId } });
    }

  },
  mounted() {
    this.itemId = this.$route.query.itemId;
    this.productId= this.$route.query.productId;
    this.fetchItemList()
  }
}
</script>
